<template>
  <div class="app-container">
    <div class="head-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="咨询人">
          <el-input v-model="formInline.quizzer" placeholder="咨询人" />
        </el-form-item>
        <el-form-item label="咨询内容">
          <el-input
            v-model="formInline.context"
            placeholder="咨询内容"
          />
        </el-form-item>
        <el-form-item label="回复状态">
          <el-select v-model="formInline.reply" placeholder="回复状态">
            <el-option label="全部" value="" />
            <el-option label="已回复" value="Y" />
            <el-option label="未回复" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item label="问题类型">
          <el-select v-model="formInline.questionType" placeholder="问题类型">
            <el-option label="全部" value="" />
            <el-option label="婚姻家庭" value="1" />
            <el-option label="交通事故" value="2" />
            <el-option label="刑事辩护" value="3" />
            <el-option label="合同纠纷" value="4" />
            <el-option label="公司法" value="5" />
            <el-option label="拆迁安置" value="6" />
            <el-option label="劳动纠纷" value="7" />
            <el-option label="债权债务" value="8" />
            <el-option label="医疗纠纷" value="9" />
            <el-option label="房产纠纷" value="10" />
            <el-option label="知识产权" value="11" />
            <el-option label="侵权" value="12" />
            <el-option label="其他" value="13" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryLaw">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格渲染-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" :index="indexMethod" align="center" />
<!--      <el-table-column prop="title" label="标题" width="250" header-align="center" />-->
      <el-table-column prop="context" label="内容" header-align="center" />
      <el-table-column prop="questionType" label="类型" width="150" align="center" />
      <el-table-column prop="quizzer" label="咨询人" width="150" align="center" />
      <el-table-column prop="cTime" label="咨询时间" width="150" align="center" />
      <el-table-column prop="isPublic" label="是否公开" width="50" align="center" :formatter="publicFormat" />
      <el-table-column prop="countAnswer" label="回复次数" width="50" align="center" />
      <el-table-column label="操作" width="220" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleQueryAnswer(scope.$index, scope.row)">查看</el-button>
          <el-button v-permission="['admin', 'question:reply']" size="mini" @click="handlereply(scope.row)">回复</el-button>
          <el-button v-permission="['admin', 'question:del']" size="mini" @click="delQ(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :current-page="pagination.currentPage"
      :page-sizes="[30, 50, 300, 400]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 查看回复弹窗开始 -->
    <DialogConsult ref="refConsult" @postDispatchQuestion="postDispatchQuestion" />
    <!-- 结束 -->

    <!-- 回复弹窗开始 -->
    <DialogReply ref="refReply" @postReply="postReply" />
    <!-- 结束 -->
  </div>
</template>

<script>
import { getQuestion, findLawyers, replyQuestion, queryAnswer, dispatchQuestion, delQ } from '@/api/law/question'
import DialogConsult from './sub/DialogConsult'// 引用查看回复弹窗
import DialogReply from './sub/DialogReply'// 引用回复弹窗
export default {
  name: 'Question',
  components: {
    DialogConsult, // 注册查看回复弹窗
    DialogReply
  },
  data() {
    return {
      formInline: {
        quizzer: '', // 咨询人
        context: '', // 咨询内容
        reply: '', // 回复状态 "Y, N"
        questionType: '' // 问题类型，1-13，详看数据字典
      },
      pagination: {
        currentPage: 1,
        pageSize: 30,
        total: 0
      },
      tableData: [],

      // 指派人数据
      Designator: [],
      qid: ''// 问题的id
    }
  },
  created() {
    this.queryLaw()
  },
  methods: {
    // 删除问题
    delQ(row) {

      let param = {qid: row.id};

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delQ(param).then(res => {
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // delQ(param).then(res => {
      //   console.log('删除结果',res)
      // })
    },
    indexMethod(index) {
      return index + 1
    },
    queryLaw() {
      // let _tableData = this.tableData;
      const param = { ...this.formInline, ...this.pagination }
      getQuestion(param).then((res) => {
        this.tableData = res.records
        this.pagination.total = res.total
      })
        .catch((err) => {
          console.log(err)
        })
    },
    publicFormat(row, column) {
      if (row.isPublic === 'Y') {
        return '是'
      } else if (row.isPublic === 'N') {
        return '否'
      } else {
        return '-'
      }
    },
    // 改变分页大小
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.queryLaw()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.queryLaw()
    },
    handleQueryAnswer(index, row) {
      this.qid = row.id// 获取问题的id

      this.$refs.refConsult.countAnswer = row.countAnswer
      findLawyers().then((res) => {
        this.$refs.refConsult.options = res
      }).catch((err) => {
        console.log(err)
      })

      // 查询咨询问题的回复数据----开始
      const paramAnswer = {
        qid: row.id,
        currentPage: 1,
        pageSize: 10
      }
      queryAnswer(paramAnswer).then((res) => {
        this.$refs.refConsult.answerList = res.records
      }).catch((err) => {
        console.log(err)
      })
      // 查询咨询问题的回复数据----结束
      // 打开查看回复弹窗
      this.$refs.refConsult.dialogVisible = true
      this.$refs.refConsult.datalist = row
    },

    // 回复咨询的问题----开始
    handlereply(row) {
      window.console.log(row)
      this.$refs.refReply.datalist = row
      this.$refs.refReply.dialogReply = true
    },
    postReply(id, val) {
      const _this = this
      if (val === '') {
        _this.$message({
          type: 'info',
          message: '，您还没有输入内容哦，请输入内容!'
        })
        return
      }
      const param = {
        answer: val,
        qid: id
      }
      replyQuestion(param).then((res) => {
        _this.$message({
          type: 'success',
          message: '回复成功!'
        })
        _this.$refs.refReply.dialogReply = false
        _this.queryLaw()// 回复完咨询，回调列表
      }).catch((err) => {
        console.log(err)
      })
    },
    // 回复咨询的问题----结束

    // 咨询问题指派
    postDispatchQuestion(val) {
      console.log('指派员的id:', val)
      console.log('问题的id:', this.qid)
      const param = {
        qid: this.qid,
        replyId: val
      }
      dispatchQuestion(param).then((res) => {
        console.log(res)
        // if(res.Code=='200'){
        //   this.$message({
        //       type: 'success',
        //       message: '指派成功!'
        //     })
        //   this.$refs.refConsult.dialogVisible = false;
        // }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
</style>
